<template>
  <div style="font-size: 0.35rem">
    <div style="height: 1rem; line-height: 1rem">
      <span @click="back" style="margin-left: 0.5rem"><</span>
      <span style="margin-left: 2.4rem; text-align: center">收货地址</span>
    </div>
    <div v-if="di">
      <div class="huo">
        <div>
          <div
            class="box"
            style="
              /* border: 0.01rem solid #c4d8ff; */
              height: 2.8rem;
              padding-top: 0.1rem;
            "
          >
            <div
              class="left"
              style="
                width: 1rem;
                height: 2.8rem;
                text-align: center;
                float: left;
              "
            >
              <p
                style="
                  width: 1rem;
                  height: 1rem;
                  border-radius: 50%;
                  background: #c4d8ff;
                  line-height: 1rem;
                  text-align: center;
                  color: #77a4ff;
                  border: none;
                "
              >
                {{ diobj.xing }}
              </p>
            </div>
            <div class="right" style="float: left; margin-left: 0.3rem">
              <div>
                <p>
                  <span style="font-weight: bold">{{ diobj.xing }} </span
                  >&nbsp;&nbsp;&nbsp;&nbsp;<span
                    style="font-size: 0.3rem; color: #ccc"
                  >
                    {{ diobj.phone }}</span
                  >
                </p>
                <p>{{ diobj.address }}</p>
                <p style="margin-top: 0.8rem; color: #ccc; display: flex">
                  <span
                    ><van-checkbox v-model="checked"
                      >设为默认地址</van-checkbox
                    ></span
                  >
                  <span style="margin-left: 0.5rem">编辑</span>
                  <span style="margin-left: 0.5rem" @click="del">删除</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="but" @click="but">+添加收货地址</button>
    </div>
    <div v-else>
      <div style="color: #a0a0a0; text-align: center; margin-top: 5rem">
        暂无收货地址哦~
      </div>
      <button class="but" @click="but">+添加收货地址</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()
const but = () => {
  router.push('/ding/save')
}
const back = () => {
  router.push('/ding/dingd')
}

// 设为默认地址
const checked = ref(false)
// 获取地址
const di = localStorage.getItem('di')
console.log(di)
const diobj = ref([])
if (di) {
  diobj.value = JSON.parse(di)
  console.log(diobj)
  console.log(diobj.value)
  const diobj1 = ref()
  if (diobj) {
    diobj1.value = JSON.stringify(diobj.value)
    console.log(diobj1.value)
  }
}

// 删除地址
const del = () => {
  localStorage.removeItem('di')
}
</script>

<style scoped>
.huo {
  height: 10rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  overflow: auto;
  margin-top: 0.4rem;
}
.but {
  width: 6rem;
  height: 0.8rem;
  background-color: #286cf5;
  color: white;
  border-radius: 0.2rem;
  border: none;
  margin: 0 auto;
  display: block;
  /* margin-top: 5rem; */
  position: absolute;
  left: 0.7rem;
  bottom: 1.5rem;
}
</style>
